$(function () {
  // 默认选中第一个 tab
  const $tabs = $('.category-tabs-list li');

  const categoryParams = {
    currentPage: 1,
    total: 10,
    categoryDefaultTab: 'ALL',
  }


  $tabs.on('click', function (e) {
    e.preventDefault();
    // 切换选中状态
    $tabs.removeClass('active');
    $(this).addClass('active');
    // 获取 data-tabs 值
    categoryParams.categoryDefaultTab = $(this).data('tabs');
    categoryParams.currentPage = 1;
    goToTop()
    // 请求接口
    getBlogCategoryData()
  });

  // 默认选中指定值（例如 "ALL"）
  const $default = $tabs.filter(`[data-tabs="${categoryParams.categoryDefaultTab}"]`);

  if ($default.length) {
    $default.trigger('click');
  } else {
    $tabs.first().trigger('click'); // 如果没匹配到，就默认第一个
  }


  // 获取所有数据
  function getBlogCategoryData () {
    // 请求接口
    const params = categoryParams

    console.log(params);

    // $.ajax({
    //   url: '/api/blog/category',
    //   type: 'POST',
    //   data: params,
    //   success: function (res) {
    //     const { code } = res || {}
    //     if (code != 200) return

    //   }
    // })

    const blogDataList = {
      currentPage: 1,
      total: 100,
      blogList: {
        img: '../../img/PC/last-blog.png',
        id: 1,
        title: 'CB4512 Monocrystalline Synthetic Diamond',
        content: 'Monocrystalline Synthetic Diamond is complete, transparent in color, high in strength, good in thermal stability, and low in magnetism...',
        time: '2023-05-05',
        viewNum: '123'
      },
      data: [{
        img: '../../img/PC/last-blog.png',
        id: 789,
        title: 'CB4512 Monocrystalline Synthetic Diamond 1',
        content: '内容',
        time: '2023-05-05',
        viewNum: '123'
      }, {
        img: '../../img/PC/last-blog.png',
        id: 789,
        title: '标题2',
        content: '内容',
        time: '2023-05-05',
        viewNum: '123'
      }, {
        img: '../../img/PC/last-blog.png',
        id: 789,
        title: '标题3',
        content: 'Monocrystalline Synthetic Diamond is complete, transparent in color, high in strength, good in thermal stability, and low in magnetism...',
        time: '2023-05-05',
        viewNum: Math.floor(Math.random() * 1000)
      },
      {
        img: '../../img/PC/last-blog.png',
        id: 789,
        title: '标题3',
        content: 'Monocrystalline Synthetic Diamond is complete, transparent in color, high in strength, good in thermal stability, and low in magnetism...',
        time: '2023-05-05',
        viewNum: Math.floor(Math.random() * 1000)
      }
      ]
    }
    renderBlogList(blogDataList)
  }

  function renderBlogList (paramsData) {
    const $latestBlog = $('.details-category-show-content .latest-blog-content');
    const $surplusList = $('.details-category-show-content .blog-surplus-content .surplus-content-list');
    if (!paramsData) return;
    // 主内容
    const main = paramsData.blogList;
    $latestBlog.html(`
  <div class="left-blog-img" >
        <img src="${main.img}" alt="">
      </div>
      <div class="rt-blog-info">
        <div class="rt-blog-info-content">
          <h1 class="rt-blog-info-title">
          ${main.title}

          </h1>
          <p class="rt-blog-info-describe">
          ${main.content}
          </p>
          <button class="rt-blog-info-btn" data-latest='${JSON.stringify(main)}' >Read more</button>
        </div>
        <div class="rt-blog-visits">
          <span class="rt-blog-visits-icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M7.9692 2.24228H7.91829C7.16044 2.23788 6.40931 2.38451 5.70875 2.6736C5.00819 2.96269 4.37225 3.38846 3.83805 3.92604C3.30386 4.46362 2.88212 5.10224 2.59746 5.80461C2.31279 6.50698 2.17092 7.25902 2.18011 8.01683C2.20182 9.56723 2.82835 11.0478 3.92612 12.1429C5.02389 13.2379 6.50602 13.8608 8.05647 13.8786H8.11102C8.86612 13.8787 9.61372 13.7289 10.3105 13.4378C11.0072 13.1468 11.6393 12.7203 12.17 12.1832C12.7007 11.6461 13.1195 11.0089 13.4022 10.3087C13.6848 9.6085 13.8256 8.85915 13.8165 8.1041C13.7977 6.5578 13.1761 5.0799 12.0839 3.98505C10.9918 2.89021 9.51545 2.26491 7.9692 2.24228ZM11.6347 11.6932C11.1642 12.1614 10.6051 12.5312 9.99012 12.7809C9.37514 13.0307 8.71655 13.1554 8.05283 13.1477C6.69312 13.1298 5.39419 12.5815 4.43298 11.6196C3.47177 10.6577 2.92433 9.35838 2.90738 7.99865C2.90061 7.33787 3.02546 6.68235 3.27466 6.07033C3.52385 5.4583 3.89241 4.90201 4.35882 4.4339C4.82524 3.96579 5.38019 3.59523 5.99131 3.34381C6.60243 3.0924 7.25749 2.96518 7.91829 2.96956H7.96556C9.32019 2.9912 10.6131 3.53994 11.5697 4.49929C12.5263 5.45864 13.0714 6.75305 13.0892 8.10774C13.0987 8.77226 12.9749 9.43195 12.7251 10.0478C12.4753 10.6636 12.1045 11.2231 11.6347 11.6932Z"
                fill="#B0B0B0" />
              <path
                d="M9.45526 8.36648H8.00071V5.45739C8.00071 5.36094 7.9624 5.26845 7.8942 5.20026C7.82601 5.13206 7.73352 5.09375 7.63707 5.09375C7.54063 5.09375 7.44814 5.13206 7.37994 5.20026C7.31175 5.26845 7.27344 5.36094 7.27344 5.45739V8.73011C7.27344 8.77787 7.28284 8.82515 7.30112 8.86927C7.31939 8.91339 7.34618 8.95348 7.37994 8.98724C7.41371 9.02101 7.4538 9.0478 7.49792 9.06607C7.54203 9.08434 7.58932 9.09375 7.63707 9.09375H9.45526C9.5517 9.09375 9.64419 9.05544 9.71239 8.98724C9.78058 8.91905 9.81889 8.82656 9.81889 8.73011C9.81889 8.63367 9.78058 8.54118 9.71239 8.47298C9.64419 8.40479 9.5517 8.36648 9.45526 8.36648Z"
                fill="#B0B0B0" />
            </svg>
            <span class="rt-blog-visits" id="visits-time">${main.time}</span>
          </span>
          <span class="rt-blog-visits-icon">
            <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
              <path
                d="M7.99805 3.16406C10.1315 3.16406 11.8418 4.38438 13.0498 5.67285C13.6492 6.31225 14.1106 6.95363 14.4219 7.43555C14.5711 7.66662 14.6851 7.85985 14.7627 7.99707C14.6851 8.13433 14.5713 8.3282 14.4219 8.55957C14.1106 9.04147 13.6492 9.68295 13.0498 10.3223C11.8418 11.6107 10.1314 12.8311 7.99805 12.8311C5.86462 12.8309 4.15422 11.6107 2.94629 10.3223C2.34685 9.68287 1.88546 9.04149 1.57422 8.55957C1.42473 8.32809 1.31097 8.13432 1.2334 7.99707C1.31094 7.85989 1.42498 7.66665 1.57422 7.43555C1.88543 6.95367 2.34693 6.31219 2.94629 5.67285C4.15422 4.38439 5.86462 3.16419 7.99805 3.16406Z"
                stroke="#B0B0B0" stroke-linecap="round" stroke-linejoin="round" />
              <path
                d="M8 6.5C8.82843 6.5 9.5 7.17157 9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5Z"
                stroke="#B0B0B0" stroke-linecap="round" stroke-linejoin="round" />
            </svg>
            <span class="rt-blog-visits" id="visits-num"> ${main.viewNum} </span>
          </span>
        </div>
      </div>
  `);
    $(document).on('click', '.latest-blog-content .rt-blog-info-btn', function () {
      const latestItem = JSON.parse($(this).attr('data-latest'));
      alert(latestItem.title);

    });


    // 剩余列表
    const html = paramsData.data.map(item => `
  <div class="surplus-content-item">
          <div class="blogs-img">
            <img src="${item.img}" alt="">
          </div>
          <div class="blogs-content-body">
            <div class="blogs-copy-area">
              <div class="products-title">
                    ${item.title}
              </div>
              <div class="products-desc">
                <p>
                  ${item.content}
                </p>
              </div>
              <button class="blogs-more" data-latest='${JSON.stringify(item)}' >
                Read more
              </button>
            </div>
            <div class="blogs-read">
              <div class="blogs-info">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M7.9692 2.24363H7.91829C7.16044 2.23922 6.40931 2.38585 5.70875 2.67494C5.00819 2.96404 4.37225 3.3898 3.83805 3.92738C3.30386 4.46496 2.88212 5.10358 2.59746 5.80595C2.31279 6.50832 2.17092 7.26037 2.18011 8.01817C2.20182 9.56858 2.82835 11.0492 3.92612 12.1442C5.02389 13.2393 6.50602 13.8621 8.05647 13.88H8.11102C8.86612 13.88 9.61372 13.7302 10.3105 13.4392C11.0072 13.1481 11.6393 12.7217 12.17 12.1845C12.7007 11.6474 13.1195 11.0103 13.4022 10.3101C13.6848 9.60984 13.8256 8.86049 13.8165 8.10544C13.7977 6.55914 13.1761 5.08124 12.0839 3.9864C10.9918 2.89155 9.51545 2.26625 7.9692 2.24363ZM11.6347 11.6945C11.1642 12.1628 10.6051 12.5325 9.99012 12.7823C9.37514 13.032 8.71655 13.1567 8.05283 13.1491C6.69312 13.1312 5.39419 12.5828 4.43298 11.6209C3.47177 10.659 2.92433 9.35972 2.90738 7.99999C2.90061 7.33921 3.02546 6.6837 3.27466 6.07167C3.52385 5.45965 3.89241 4.90336 4.35882 4.43525C4.82524 3.96714 5.38019 3.59657 5.99131 3.34516C6.60243 3.09375 7.25749 2.96652 7.91829 2.9709H7.96556C9.32019 2.99254 10.6131 3.54128 11.5697 4.50063C12.5263 5.45998 13.0714 6.75439 13.0892 8.10908C13.0987 8.7736 12.9749 9.4333 12.7251 10.0491C12.4753 10.665 12.1045 11.2245 11.6347 11.6945Z"
                    fill="#B0B0B0" />
                  <path
                    d="M9.45526 8.36355H8.00071V5.45446C8.00071 5.35801 7.9624 5.26552 7.8942 5.19733C7.82601 5.12913 7.73352 5.09082 7.63707 5.09082C7.54063 5.09082 7.44814 5.12913 7.37994 5.19733C7.31175 5.26552 7.27344 5.35801 7.27344 5.45446V8.72718C7.27344 8.77494 7.28284 8.82222 7.30112 8.86634C7.31939 8.91046 7.34618 8.95055 7.37994 8.98431C7.41371 9.01808 7.4538 9.04487 7.49792 9.06314C7.54203 9.08141 7.58932 9.09082 7.63707 9.09082H9.45526C9.5517 9.09082 9.64419 9.05251 9.71239 8.98431C9.78058 8.91612 9.81889 8.82363 9.81889 8.72718C9.81889 8.63074 9.78058 8.53825 9.71239 8.47005C9.64419 8.40186 9.5517 8.36355 9.45526 8.36355Z"
                    fill="#B0B0B0" />
                </svg>
                <span>${item.time}</span>
              </div>
              <div class="blogs-info">
                <svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
                  <path
                    d="M7.99805 3.16663C10.1315 3.16663 11.8418 4.38695 13.0498 5.67542C13.6492 6.31481 14.1106 6.95619 14.4219 7.43811C14.5711 7.66918 14.6851 7.86241 14.7627 7.99963C14.6851 8.13689 14.5713 8.33076 14.4219 8.56213C14.1106 9.04403 13.6492 9.68551 13.0498 10.3248C11.8418 11.6132 10.1314 12.8336 7.99805 12.8336C5.86462 12.8335 4.15422 11.6133 2.94629 10.3248C2.34685 9.68543 1.88546 9.04405 1.57422 8.56213C1.42473 8.33066 1.31097 8.13689 1.2334 7.99963C1.31094 7.86246 1.42498 7.66921 1.57422 7.43811C1.88543 6.95623 2.34693 6.31476 2.94629 5.67542C4.15422 4.38696 5.86462 3.16675 7.99805 3.16663Z"
                    stroke="#B0B0B0" stroke-linecap="round" stroke-linejoin="round" />
                  <path
                    d="M8 6.5C8.82843 6.5 9.5 7.17157 9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5Z"
                    stroke="#B0B0B0" stroke-linecap="round" stroke-linejoin="round" />
                </svg>
                <span>${item.viewNum}</span>
              </div>
            </div>
          </div>
        </div>
  `).join('');
    $surplusList.html(html);

    $(document).on('click', '.blog-surplus-content .surplus-content-list .blogs-more', function () {
      const otherItem = JSON.parse($(this).attr('data-latest'));
      console.log(otherItem);
      alert(otherItem.title);
    });

    RenderPagination(paramsData.currentPage, paramsData.total, 10, $surplusList, function (targetPage) {
      categoryParams.currentPage = targetPage;
      goToTop()
      getBlogCategoryData()
    })
  }



  function goToTop () {
    $("html, body").animate({ scrollTop: 0 }, "slow");
  }

  // 如果用户在滚动中手动滚动鼠标，立即中断动画
  $(window).on('wheel DOMMouseScroll touchstart', function () {
    $('html, body').stop(); // 停止动画
  });


  // 校验字段
  const validationRules = [
    {
      key: 'consultingName',
      required: true,
      maxLength: 50,
      errorMessage: {
        required: 'Please enter your name',
        maxLength: 'The length cannot exceed 50'
      }
    },
    {
      key: 'email',
      required: true,
      maxLength: 30,
      regex: regEmail,
      errorMessage: {
        required: 'Please enter your email',
        maxLength: 'The length cannot exceed 30',
        regex: 'Please enter a valid email'
      }
    },
  ];

  // 校验表单值
  $('.category-subscribe-content').on('click', '.dm-dialog-btn', function () {
    const formValues = FormValidator.validateForm(validationRules, $('#refDialogWrite'));
    if (!formValues.valid) return;
    console.log('提交表单', formValues.formParam);
    $('.category-subscribe-content')
      .find('.category-subscribe-title, .refDialogWrite, .subscribe-btn-container')
      .fadeOut().promise().done(function () {
        // 所有元素 fadeOut 完毕后执行
        const successMsg = $(`<div class="subscribed-success-container">
          <h1 class="subscribed-title">Success!</h1>
        <p class="subscribed-content">
          Congratulations, you have successfully subscribed!
        </p>
    </div>`);
        $('.category-subscribe-content').append(successMsg);

      });


  })
})
